<template>
	<div class="join_stores">
		<main>
			<header>
				<img :src="imgUrl + state.stores_pic" />
			</header>
			<div class="info">
				<div class="title">门店介绍</div>
				<p style="font-size: 18px;" v-html="state.stores_introduce"></p>
			</div>
		</main>

		<div class="buy_now">
			<van-button size="large" @click="joinUs">加入我们</van-button>
		</div>

		<!-- 填写信息弹窗 -->
		<van-popup v-model:show="state.show" style="background: none">
			<div class="popup_content">
				<div class="title">
					<span>填写信息</span>
					<p>完善信息方便我们联系到您~</p>
				</div>
				<div class="form_item">
					<span>姓名</span>
					<van-field v-model="state.form.username" placeholder="请输入" />
				</div>
				<div class="form_item">
					<span>联系方式</span>
					<van-field v-model="state.form.mobile" type="tel" placeholder="请输入" />
				</div>

				<div class="btns">
					<van-button class="btn" size="normal" v-debounce="submit">提交</van-button>
					<van-button class="btn btn_wht" size="normal" @click="state.show = false">取消</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/index';
import { globalConfigValue } from '@/api/common';
import { submitStoreApply } from '@/api/index';
import { verifyPhone } from '@/utils/toolsValidate';
import { Toast } from 'vant';
import type { ToastOptions } from 'vant';

const imgUrl = import.meta.env.VITE_IMG_URL;
const router = useRouter();
const mainStore = useMainStore();
const state = reactive({
	show: false,
	form: {
		user_id: mainStore.user_id,
		username: '',
		mobile: ''
	},
	stores_introduce: '',
	stores_pic: ''
});

onMounted(() => {
	getGlobalConfigValue();
});

const checkRoles = (key: string): boolean => {
  return String(mainStore.userInfo?.state).split(',').includes(key);
};

const joinUs = () => {
  if (checkRoles('4')) {
    return Toast('已经是门店了');
  }
  if (!checkRoles('3')) {
    return Toast('您目前还不是红娘，无法申请加入门店！');
  }
  state.show = true
}

const submit = async (): Promise<void | ToastOptions> => {
	if (!state.form.username.trim()) return Toast('请输入姓名');
	if (!state.form.mobile.trim()) return Toast('请输入联系方式');
	if (!verifyPhone(state.form.mobile.trim())) return Toast('联系方式格式不正确');
	console.log(state.form);
	await submitStoreApply(state.form);
	Toast.success('提交成功');
	setTimeout(() => {
		router.go(-1);
	}, 2000);
};

const getGlobalConfigValue = () => {
	globalConfigValue('stores_auth_introduce').then((res: any) => {
		state.stores_introduce = res.data.item_value;
	});
	globalConfigValue('stores_pic').then((res: any) => {
		state.stores_pic = res.data.item_value;
	});
};
</script>

<style lang="scss" scoped>
:deep(.van-field) {
	height: 40px;
	padding: 0 15px;
	border-radius: 5px;
	background: #f5f7fa;
	input {
		height: 40px;
		color: #808080;
		font-size: 13px;
	}
}
.join_stores {
	main {
		padding: 15px;
		header {
			margin-bottom: 10px;
			img {
				width: 100%;
				height: 150px;
				object-fit: cover;
			}
		}
		.info {
			margin-bottom: 55px;

			.title {
				margin-bottom: 5px;
				font-size: 15px;
				font-weight: bold;
			}

			p {
				color: #333333;
				text-align: justify;

				font-size: 15px;
				font-weight: 400;

				line-height: 28px;
			}
		}
	}
	.buy_now {
		@include flx-justify-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		height: 55px;
		box-shadow: 0px -4px 16px 0px rgba(156, 156, 156, 0.23);
		background: white;
		button {
			flex: 1;
			height: 100%;
			color: white;
			font-size: 17px;
			font-weight: 400;
			background: linear-gradient(86deg, #f53d7d, #fb56b3);
		}
	}

	.popup_content {
		width: 295px;
		box-sizing: border-box;
		padding: 35px 30px 40px 30px;
		border-radius: 10px;
		background: white;

		.title {
			font-size: 14px;
			margin-bottom: 10px;
			span {
				display: block;
				margin-bottom: 5px;
				font-size: 17px;
				font-weight: bold;
			}
		}
		.form_item {
			overflow: hidden;

			& > span {
				display: block;
				margin-top: 15px;
				margin-bottom: 10px;
				font-size: 14px;
				font-weight: bold;
				color: #333333;
			}
		}

		.btns {
			@include flx-justify-between;
			margin-top: 40px;
			.btn {
				width: 110px;
				height: 43px;
				border-radius: 22px;
				color: #ffffff;
				font-size: 15px;
				background: linear-gradient(265deg, #f53d7d, #fb56b3);
			}
			.btn_wht {
				color: #666666;
				border: 1px solid #dbdbdb;
				background: white;
			}
		}
	}
}
</style>
